<template>
  <div class="alarmList">
    <div class="title"></div>
    <div class="content">
      <div class="items" v-for="item in warnInfoList" :key="item">
        <div class="font_color_base f16 font_align_r">{{ item.starttime }}</div>
        <div class="siteName">{{ item.subname }}</div>
        <div class="font_color_f">{{ item.warnInfo }}</div>
      </div>
      <div class="mt20 font_color_blue text-center" v-if="!warnInfoList.length">暂无数据</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AlarmList',
  data() {
    return {
      warnInfoList: []
    }
  },
  created() {
    this.getWarnInfoList()
  },
  methods: {
    async getWarnInfoList() {
      const res = await this.$http.get('/screenData/getWarnInfoList')
      if (res.code == '200') {
        this.warnInfoList = res.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.alarmList {
  width: 100%;
  height: 700px;
  background: url(../../../assets/images/screen/alarmInfoList.png) no-repeat;
  background-size: 100% 100%;
  position: relative;

  .title {
    width: 100%;
    max-width: 400px;
    height: 50px;
    background: url(../../../assets/images/screen/title1.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .content {
    width: 100%;
    height: 100%;
    padding: 30px 10px 20px 10px;
    overflow: auto;

    .items {
      width: 100%;
      height: 140px;
      background: url(../../../assets/images/screen/listBg.png) no-repeat;
      background-size: 100% 100%;
      border: 1px solid #23769B;
      border-radius: 10px;
      margin-bottom: 10px;
      padding: 10px 20px;
      overflow: auto;

      .siteName {
        color: #8ADDFF;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
